import React from "react";
import ReactDOM from "react-dom/client";

/**
 * ref
 *    回想在 vue 中 ref 的作用
 *        1. 给元素或组件添加一个标识，然后通过 this.$refs.xx 标识获取到：
 *              普通html元素 - dom对象
 *              组件 - 这个组件的实例对象
 *        2. vue3 中 ref() 响应式API
 *
 *    React 中 ref 的作用
 *        给元素或组件添加一个标识，然后通过 this.$refs.xx 标识获取到：
 *              普通html元素 - dom对象
 *              组件 - 这个组件的实例对象
 *
 *    React 中 ref 的使用
 *
 *      1. 字符串方式
 *      2. 函数的方式
 *      3. React.createRef() api 的方式
 *
 */

class Hello extends React.Component {
  state = {
    name: "张三",
  };
  render() {
    return <div>Hello - {this.state.name}</div>;
  }
}

/**
 * 字符串的方式 - 被 react 弃用了。
 *    通过 this.refs 获取
 */
class App extends React.Component {
  handleClick = () => {
    // this.refs.inputRef 是个 DOM 对象
    alert(this.refs.inputRef.value);
  };

  handleClickTwo = () => {
    console.log(this.refs.helloRef);
  };

  render() {
    console.log(this); // this.refs.inputRef
    return (
      <div>
        <h1 ref="h1Ref">App</h1>
        <input ref="inputRef" type="text" placeholder="请输入内容" />
        <button onClick={this.handleClick}>点击我获取上面输入框的内容</button>
        <hr />
        <Hello ref="helloRef" />
        <button onClick={this.handleClickTwo}>
          点我，获取Hello组件的实例对象
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
